<template>
    <view class="setting tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">设置</tn-navbar>

        <!-- <tn-list icon="right" :bottom-line="true">重置密码</tn-list> -->
        <tn-list icon="right" :bottom-line="true" @click="navPage('/pages/mine/setting/updatePassword')">修改密码</tn-list>
        <!-- <tn-list icon="right" :bottom-line="true">关于我们</tn-list> -->
        <tn-list icon="right" :bottom-line="true" @click="clear">清空缓存</tn-list>
        <tn-list icon="right" color="tn-color-red" @click="confirmModal = true">退出登录</tn-list>
    </view>
    <tn-modal v-model="confirmModal" :data="confirmModalData" show-cancel @confirm="confirmLogoutFun"></tn-modal>

    <tn-toast ref="toast"></tn-toast>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { navLogin, navPage } from "@/tuniao-ui/utils";
import { ModalDataType } from "@/tuniao-ui/types";
import TnList from "@/tuniao-ui/components/tn-list/src/List.vue";
import TnModal from "@/tuniao-ui/components/tn-modal/src/Modal.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
const userStore = useUserStore();
const isLogin = ref<boolean>(false);

// modal配置参数
const confirmModal = ref<boolean>(false)
const confirmModalData: ModalDataType = {
    title: '提示',
    content: '确认退出吗'
}

const toast = ref<InstanceType<typeof TnToast>>();

function confirmLogoutFun() {
    userStore.logout();
    toast.value?.show({
        title: "退出成功，即将跳转首页",
    });
    setTimeout(function () {
        navPage("/pages/index");
        //window.location.replace("/pages/index");
    }, 2000);
}

function clear() {
    toast.value?.show({
        title: "清空成功",
    });
}

onMounted(() => {
    isLogin.value = userStore.isLogin();
    if (!isLogin.value) {
        navLogin();
        return;
    }

});
</script>
  
<style lang="scss" scoped>
.setting {
    background-color: #fff;

}
</style>
  